<template>
  <div class="registered-container" :style="{ backgroundImage: `url(${bg})` }">
    <div class="registered-form">
      <div class="form">
        <div class="title-container">
          <h3 class="title">注册新用户</h3>
        </div>
        <div class="tab">
          <div class="tabs" v-for="tab in tabList" :key="tab.id" :class="currentSteps == tab.id ? 'active' : ''"
            @click="switchTab(tab.id)">
            {{ tab.name }}
          </div>
        </div>
        <!-- 供应商 渠道商 注册 -->
        <div class="tab-container" v-show="currentSteps === 1">
          <div class="registered-card">
            <div class="suppliers-registered" :class="isPickSuppliersCard ? 'activeSupCard' : ''" @click="regSuppliers">
              <div class="suppliersIcon"></div>
              <div class="name">注册成为新的供应商</div>
            </div>
            <div class="distributors-registered" :class="isPickDistributorsCard ? 'activeDisCard' : ''"
              @click="regDistributors">
              <div class="distributorsIcon"></div>
              <div class="name">注册成为新的渠道商</div>
            </div>
          </div>
        </div>
        <!-- 阅读协议 -->
        <div class="registration-agreement" v-show="currentSteps === 2">
          <div class="tab-content">
            <div class="tab-item" :class="tabsActiveName === 'first' ? 'active' : ''">
              注册协议/Register Guide
            </div>
          </div>
          <div class="agreement-content" v-html="resAgreementData">
          </div>
        </div>
        <!-- 注册信息填写 -->
        <div class="registration-info" v-show="currentSteps === 3">
          <el-form :model="registeredRuleForm" :rules="registeredRules" ref="registerRuleFormRef" label-width="100px">
            <el-form-item label="组织类型" prop="organize_type">
              <el-select v-model="registeredRuleForm.organize_type" placeholder="请选择组织类型" class="item-input">
                <el-option v-for="item in organizationTypeOptions" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="registeredRuleForm.organize_type === 'personal'" label="团队名称" prop="personalName"
              class="item-input">
              <el-input v-model="registeredRuleForm.personalName"></el-input>
            </el-form-item>
            <el-form-item v-if="registeredRuleForm.organize_type === 'company'" label="公司名称" prop="companyName"
              class="item-input">
              <el-input v-model="registeredRuleForm.companyName"></el-input>
            </el-form-item>
            <el-form-item v-if="registeredRuleForm.organize_type === 'company'" label="公司税号" prop="tin"
              class="item-input">
              <el-input v-model="registeredRuleForm.tin"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contact_person" class="item-input">
              <el-input v-model="registeredRuleForm.contact_person"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="contact_way" class="item-input">
              <el-input v-model="registeredRuleForm.contact_way"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- 设置密码 -->
        <div class="pass-container" v-show="currentSteps === 4">
          <el-form :model="setPassRuleForm" :rules="setPassRules" ref="passRuleFormRef" label-width="100px">
            <div style="display: flex; ">
              <el-form-item label="登录账号" prop="mobile">
                <el-input v-model.number="registeredRuleForm.contact_way" class="item-input" disabled></el-input>
              </el-form-item>
              <!-- <div class="aside-note">
                <i class="el-icon-info"></i>请至少使用大小写字母、数字组合<br>的账号，长度小于16位。
              </div> -->
            </div>

            <div style="display: flex; ">
              <el-form-item label="设置密码" prop="password">
                <el-input :key="passwordType" ref="passwordText" v-model="setPassRuleForm.password" auto-complete="on"
                  :type="passwordType" class="item-input"></el-input>
                <span class="show-pwd" @click="showPwd('pass')">
                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
              </el-form-item>
              <div class="aside-note">
                <i class="el-icon-info"></i>请至少使用大小写字母、数字、特<br>殊字符组合的密码，长度8-16位。
              </div>
            </div>

            <el-form-item label="确认密码" prop="checkPass">
              <el-input ref="confirmPasswordText" v-model="setPassRuleForm.checkPass" autocomplete="on"
                :type=confirmPasswordType class="item-input"></el-input>
              <span class="show-pwd show-confirm-pwd" @click="showPwd('confirmPass')">
                <svg-icon :icon-class="confirmPasswordType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>

          </el-form>
        </div>
        <!-- 步骤按钮 -->
        <div class="tab-btn">
          <el-button type="primary" v-show="currentSteps >= 2" @click="preStep">上一步</el-button>
          <el-button type="primary" v-show="currentSteps !== 4" @click="onContinue">{{ (currentSteps === 2) ? '同意并继续' :
            '下一步'
          }}</el-button>
          <el-button type="primary" v-show="currentSteps === 4" @click="finishRegistered"
            :loading="loading">完成注册</el-button>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import { mapGetters } from "vuex";
import config from "@/settings";
const { imgBaseUrl } = config;
import { getRegisterAgreement } from "@/api/user";
export default {
  name: "Registered",
  data() {
    // 手机号
    const validateMobile = (rule, value, callback) => {
      const phoneReg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
      if (!value) {
        callback(new Error("联系电话不可为空"));
      } else if (value.length <= 10 || !phoneReg.test(value)) {
        callback(new Error("联系电话格式不正确"));
      } else {
        callback();
      }
    };
    // 登录账号
    const checkAccount = (rule, value, callback) => {
      if (!value) {
        callback(new Error("登录账号不能为空"));
      } else {
        callback();
      }
    };
    // 密码
    const validatePass = (rule, value, callback) => {
      console.log("字符长度：", value.length);
      
      let passReg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!！@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!！@#$%^&*`~()-+=]+$)(?![0-9\\W_!！@#$%^&*`~()-+=]+$)(?![a-zA-Z0-9]+$)(?![a-zA-Z\\W_!！@#$%^&*`~()-+=]+$)(?![a-z0-9\\W_!！@#$%^&*`~()-+=]+$)(?![0-9A-Z\\W_!！@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!！@#$%^&*`~()-+=]{8,16}$/
      if (!value) {
        callback(new Error('请输入密码'));
      } else if (value.length > 16) {
        callback(new Error("密码字符长度超出最大限度16位!"));
      } else if (!passReg.test(value)) {
        callback(new Error("请输入8-16位，必须包含大小写字母、数字、特殊字符组合的密码。"));
      } else {
        callback()
      }
    };
    // 确认密码
    const validateConfirmPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.setPassRuleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      resAgreementData: '',
      // 注册接口请求参数
      registeredApiParameter: {
        account_type: '', // 账号类型
        organize_type: '', // 组织类型
        name: '',  //公司/个人名称
        tin: '',
        contact_person: '',
        mobile: '',
        password: '',
      },
      organizationTypeOptions: [
        {
          value: 'company',
          label: '公司'
        },
        {
          value: 'personal',
          label: '个人团队'
        },
      ],
      isPickSuppliersCard: false,
      isPickDistributorsCard: false,
      tabsActiveName: 'first',
      tabList: [{
        id: 1,
        name: '开始',
        type: 'accountType',
      },
      {
        id: 2,
        name: '阅读协议',
        type: 'agreement',
      },
      {
        id: 3,
        name: '注册信息填写',
        type: 'registeredInfo',
      },
      {
        id: 4,
        name: '设置密码',
        type: 'password',
      }],
      registeredRuleForm: {
        organize_type: 'company',
        personalName: '',
        companyName: '',
        tin: '',
        contact_person: '',
        contact_way: '',
      },
      registeredRules: {
        organize_type: [
          { required: true, message: '请选择组织类型', trigger: 'change' }
        ],
        personalName: [
          { required: true, message: '请输入团队名称', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        tin: [
          { required: true, message: '请输入公司税号', trigger: 'blur' }
        ],
        contact_person: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        contact_way: [
          { required: true, trigger: 'blur', validator: validateMobile }
        ],
      },
      setPassRuleForm: {
        mobile: '',
        password: '',
        checkPass: ''
      },
      setPassRules: {
        // mobile: [
        //   { required: true, validator: checkAccount, trigger: 'blur' }
        // ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validateConfirmPass, trigger: 'blur' }
        ],

      },
      currentSteps: 1,
      bg: imgBaseUrl + "login_bg2.png",
      loading: false,
      passwordType: "password",
      confirmPasswordType: "password",
      redirect: undefined,
    };
  },
  computed: {
    ...mapGetters(["registerUserReturnInfo"]),
  },
  created() { },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
    currentSteps: {
      handler: function (val) {
        console.log('当前步骤', val);
        if(val == 2){
          this.getRegisterAgreementFu();
        }
        
      },
      // immediate: true,
    },
  },
  methods: {
    getRegisterAgreementFu() {
      getRegisterAgreement().then((res) => {
        console.log(res.data.data);
        
        this.resAgreementData = res.data.data.protoc;
      });
    },
    showPwd(type) {

      if (type === 'pass') {
        this.passwordType = this.passwordType === "password" ? '' : 'password';
        this.$nextTick(() => {
          this.$refs.passwordText.focus();
        });
      } else {
        this.confirmPasswordType = this.confirmPasswordType === "password" ? '' : 'password';
        this.$nextTick(() => {
          this.$refs.confirmPasswordText.focus();
        })
      }

    },
    // 
    judgeAccountType() {
      const val = this.registeredApiParameter.account_type;
      if (!val) {
        this.$message.error('请选择账号类型！');
        return false;
      }
      return true;
    },
    judgeAccountInfo() {
      this.$refs.registerRuleFormRef.validate((valid) => {
        if (valid) {
          // this.$refs['registerRuleFormRef'].clearValidate();
          return true;
        } else {
          this.$message.error('请补全注册用户信息！');
          return false;
        }
      });
    },
    // 切换步骤信息
    switchTab(num) {
      this.currentSteps = num;
    },
    // 注册
    finishRegistered() {
      this.$refs.passRuleFormRef.validate((valid) => {
        if (valid) {
          this.loading = true;
          let formData = this.registeredRuleForm;
          let passFormData = this.setPassRuleForm;
          let params = {
            account_type: this.registeredApiParameter.account_type,
            organize_type: formData.organize_type,
            contact_person: formData.contact_person,
            mobile: formData.contact_way,
            password: passFormData.password // md5(passFormData.password),
          };
          // 公司/个人名称
          if (formData.organize_type === 'company') {
            params.name = formData.companyName;
            params.tin = formData.tin
          } else {
            params.name = formData.personalName
          }
          this.$store
            .dispatch("registerNewUser", params)
            .then(() => {
              this.$message.success('账号注册成功');
              let data = this.registerUserReturnInfo;
              if (data.account_inspection_status === 'wait') {
                this.$router.push({ path: "/regAudit" });
              } else if (data.account_inspection_status === 'success') {
                this.$router.push({ path: "/login" });
              } else {
                this.$forceUpdate();
              }

              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          this.$message.error('请补全账号密码信息！');
          return false;
        }
      });
    },
    regSuppliers() {
      this.isPickDistributorsCard = false;
      this.isPickSuppliersCard = !this.isPickSuppliersCard;
      this.registeredApiParameter.account_type = 'supplier';
    },
    regDistributors() {
      this.isPickSuppliersCard = false;
      this.isPickDistributorsCard = !this.isPickDistributorsCard;
      this.registeredApiParameter.account_type = 'distributor';
    },
    // 上一步
    preStep() {
      this.currentSteps -= 1;
    },
    // 同意并继续
    onContinue() {
      if (!this.judgeAccountType()) return;
      this.currentSteps += 1;
      console.log('下一步，同意并继续', this.currentSteps);

    }

  },
};
</script>


<style lang="scss">
$bg: #283443;
$light_gray: #fff;
$cursor: #fff !important;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .registered-container .el-input input {
    // color: $cursor;
  }
}

/* reset element-ui css */
.registered-container {
  background-size: cover;

  .logo {
    display: block;
    width: 138px;
    margin-left: 100px;
    margin-top: 80px;
  }

  .form-item {
    display: flex;
    color: #9b9b9b;
    font-size: 16px;

    .left {
      flex: 1;

      .el-checkbox__label {
        font-size: 16px;
      }

      .el-checkbox__inner {
        border-radius: 30px;
      }
    }

    .right {
      flex: 0 0 auto;

      .el-link {
        font-size: 16px;
      }
    }
  }

  .btn-login {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0;
    margin: 40px 0 120px;
    font-size: 18px;

    font-family: PingFangSC-Medium, PingFang SC;
  }

  .notbn-login {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0;
    margin: 40px 0 120px;
    font-size: 18px;

    font-family: PingFangSC-Medium, PingFang SC;
    background: #999 !important;
  }

  .input {
    display: inline-block;
    height: 47px;
    width: 85%;

    font-size: 18px;

    .el-input__inner {
      background-color: transparent;

      &:-internal-autofill-selected,
      &:-webkit-autofill:focus,
      &:-webkit-autofill {
        background-color: transparent !important;
        background-image: none !important;
        -webkit-appearance: menulist-button;
        box-shadow: inset 0 0 0 1000px rgba(32, 44, 60, 0.98) !important; // 改变了背景色
        -webkit-text-fill-color: #fff; // 改变了字体颜色
      }
    }

    input {
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      /* color: $light_gray; */
      height: 47px;
      /* caret-color: $cursor; */
      color: #000;

      &:-webkit-autofill {
        /* box-shadow: 0 0 0px 1000px $bg inset !important; */
        /* -webkit-text-fill-color: $cursor !important; */
      }
    }
  }

  .phoneinput {
    width: 62% !important;
  }

  .el-button.is-disabled:hover {
    background-color: transparent;
  }

  .qrbtn {
    width: 10%;
    border: none;
    color: #fff;
    background: transparent;
  }

  .el-form-item__content {
    width: 100%;
  }

  .el-form-item.form-input {
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* background: rgba(0, 0, 0, 0.1); */
    border-radius: 5px;
    color: #454545;
    /* background: #fff; */

    border-radius: 5px;
    border: 1px solid #d8d8d8;
  }

  .form-radio {
    text-align: center;

    .radio {
      color: #aaa;
    }
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.registered-container {
  position: relative;
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .registered-form {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 80px 40px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background-repeat: no-repeat;

    .form {
      width: 100%;
      height: 100%;
      background: rgba(32, 44, 60, 0.9);
      padding: 32px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
    }

    .tab {
      display: flex;
      font-size: 16px;
      margin-bottom: 24px;
      justify-content: space-between;

      .tabs {
        flex: 1;
        text-align: center;
        color: #fff;
        padding: 12px;
        cursor: pointer;
        background-color: #999; // #999  f0faff
      }

      .active {
        background-color: #3F7DFF;
      }
    }

    .tab-container {
      .registered-card {
        display: flex;
        justify-content: center;



        .suppliers-registered {
          cursor: pointer;
          width: 292px;
          height: 144px;
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
          background: rgb(240, 250, 255, .2);
          border-radius: 8px;
          margin-right: 40px;
          border: 1px solid transparent;


          .suppliersIcon {
            width: 85px;
            height: 85px;
            background: #3F7DFF;
            border-radius: 50%;
            margin: 0 auto;
            margin-top: 12px;
          }

          .name {
            color: #fff;
            text-align: center;
            margin-top: 12px;
          }

        }

        .activeSupCard {
          border: 1px solid #4FA9FD;
        }

        .distributors-registered {
          cursor: pointer;
          width: 292px;
          height: 144px;
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
          background: rgb(240, 250, 255, .2);
          border-radius: 8px;
          border: 1px solid transparent;

          .distributorsIcon {
            width: 85px;
            height: 85px;
            background: #3F7DFF;
            border-radius: 50%;
            margin: 0 auto;
            margin-top: 12px;
          }

          .name {
            color: #fff;
            text-align: center;
            margin-top: 12px;
          }
        }

        .activeDisCard {
          border: 1px solid #4FA9FD;
        }
      }

    }

    .registration-agreement {

      .tab-content {
        display: flex;
        font-size: 16px;
        margin-bottom: 30px;
        justify-content: space-between;

        .tab-item {
          text-align: center;
          color: #fff;
        }

        .active {
          border-bottom: 4px solid#3F7DFF;
        }
      }

      .agreement-content {
        color: #fff;

        p {
          padding: 0;
          margin: 0;
          line-height: 1.5;
        }

      }
    }

    .registration-info {
      display: flex;
      justify-content: center;

      .item-input {
        width: 320px;
      }

    }

    .pass-container {
      display: flex;
      justify-content: center;

      .item-input {
        width: 320px;
      }

      .aside-note {
        color: #889aa4;
        font-size: 12px;
        padding-top: 4px;
        padding-left: 4px;

        .el-icon-info {
          padding-right: 2px;
        }
      }

      .show-pwd {
        position: absolute;
        right: 110px;
        top: 2px;
        font-size: 16px;
        color: $dark_gray;
        cursor: pointer;
        user-select: none;
      }

      .show-confirm-pwd {
        right: 310px;
      }
    }

    .tab-btn {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }

  }

  .title-container {
    position: relative;
    text-align: center;
    margin-bottom: 32px;

    .title {
      font-size: 22px;
      color: #fff;
      margin: 0px auto 16px auto;
      /* text-align: center; */
      font-weight: bold;
      font-family: PingFangSC-Medium, PingFang SC;
      letter-spacing: 2px;
    }

    .desc {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9b9b9b;
      line-height: 25px;
      margin: 0 0 60px;
    }
  }
}

@media all and (max-width: 980px) {
  .registered-container {
    .registered-form {
      margin-right: 0;
      padding: 0;
    }
  }
}
</style>
